<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>预约信息 - 施工中</title>
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
		<style>
			.status-bar {
				height: 44px;
				background-color: #000;
				color: white;
				display: flex;
				align-items: center;
				padding: 0 15px;
			}

			.header-section {
				padding: 15px;
				background: #fff;
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			}

			.workorder-info {
				padding: 15px;
			}

			.status-tag {
				padding: 4px 8px;
				border-radius: 4px;
				background: #007bff;
				color: white;
			}

			.tip-box {
				padding: 15px;
				margin: 15px 0;
				background: #f8f9fa;
				border-radius: 8px;
			}

			.info-section {
				margin: 15px 0;
				padding: 15px;
				background: #fff;
				border-radius: 8px;
			}

			.info-item {
				margin: 10px 0;
				display: flex;
				justify-content: space-between;
			}

			.bottom-actions {
				display: flex;
				justify-content: end;
				padding: 15px;
			}

			.paid-seal {
				position: absolute;
				right: 10px;
				top: 10px;
				width: 80px;
				height: 40px;
				background: url('https://via.placeholder.com/80x40/def0ff/007bff?text=已支付') no-repeat;
				background-size: cover;
			}

			#woNumber {
				font-size: 18px;
				font-weight: bold;
			}
		</style>
	</head>
	<body>

		<div class="container-fluid p-0">
			<!-- 标题栏 -->
			<div class="header-section d-flex justify-content-between align-items-center">
				<a href="ShiGongZhong.html" class="text-decoration-none text-dark">
					<i class="bi bi-arrow-left"></i>
				</a>
				<h5 class="mb-0">预约信息</h5><input type="hidden" id="wid" />
				<input type="hidden" id="uid" />
			</div>

			<!-- 工单信息 -->
			<div class="workorder-info">
				<div class="d-flex justify-content-between align-items-center mb-3">
					<div>
						<span>订单编号:</span>
						<span id="woNumber"> </span>
						<i class="bi bi-share ms-2"></i>
					</div>
					<span class="status-tag">施工中</span>
				</div>
				<div class="text-warning mb-3">维修时间: <span id="repairDateDetail"></span></div>

				<!-- 提示信息 -->
				<div class="tip-box">
					<i class="bi bi-check-circle text-success me-2"></i>
					<span>施工中</span>
					<p class="mt-2">师傅正在施工中，施工完成请检查</p>
				</div>

				<!-- 维修信息 -->
				<div class="info-section">
					<h6 class="mb-3">维修信息</h6>
					<div class="info-item">
						<span>维修人员</span>
						<div class="d-flex align-items-center">
							<i class="bi bi-check-circle text-success me-2"></i>
							<span id="wsname"></span>
						</div>
					</div>
					<div class="info-item">
						<span>联系方式</span>
						<div class="d-flex align-items-center">
							<i class="bi bi-telephone me-2"></i>
							<span id="wphone"></span>
						</div>
					</div>
					<div class="info-item">
						<span>故障区域</span>
						<span id="faultLocationDetail"></span>
					</div>
					<div class="info-item">
						<span>故障原因</span>
						<span id="faultReasonDetail"></span>
					</div>
					<div class="info-item">
						<span>故障图片</span>
						<div class="d-flex gap-2">
							<div class="bg-gray-200" style="width: 80px; height: 60px;">
								<!-- 使用 img 标签显示图片 -->
								<img id="faultImage1" src="" alt="故障图片1"
									style="width: 100%; height: 100%; object-fit: cover;">
							</div>
							<div class="bg-gray-200" style="width: 80px; height: 60px;">
								<!-- 使用 img 标签显示图片 -->
								<img id="faultImage2" src="" alt="故障图片2"
									style="width: 100%; height: 100%; object-fit: cover;">
							</div>
						</div>
					</div>

				</div>

				<!-- 用户信息 -->
				<div class="info-section">
					<h6 class="mb-3">用户信息</h6>
					<div class="info-item">
						<span>联系人</span>
						<span id="contactNameDetail"></span>
					</div>
					<div class="info-item">
						<span>联系方式</span>
						<span id="contactPhoneDetail"></span>
					</div>
				</div>

				<div class="charge-item" id="shoufei">
					<h6>收费项</h6>

				</div>

				<!-- 底部按钮 -->
				<div class="bottom-actions">
					<button class="btn btn-outline-secondary">工单管理</button>
				</div>
			</div>
		</div>

		<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
		<script src="js/jquery.js"></script>
		<script src="../js/request/base.js"></script>
		<script src="js/scriptt/SZG.js"></script>
	</body>
</html>